<template>
    <div class="container">
        <div class="container-header">Online Judge</div>
        <div class="container-body">
            <div class="container-register">
                <NForm ref="registerRef" :model="registerModel" :rules="registerRules" label-placement="left"
                    label-width="auto" require-mark-placement="right-hanging">
                    <NFormItem label="账号" path="userCode">
                        <NInput v-model:value="registerModel.userCode" placeholder="请输入账号" />
                    </NFormItem>
                    <NFormItem label="密码" path="password">
                        <NInput v-model:value="registerModel.password" placeholder="请输入密码" type="password"
                            @input="handlePasswordInput" />
                    </NFormItem>
                    <NFormItem label="确认密码" path="againPassword" ref="againPasswordRef" first>
                        <NInput v-model:value="registerModel.againPassword" placeholder="请再次输入密码" type="password" />
                    </NFormItem>
                    <NFormItem label="邮箱" path="email" first>
                        <NInput v-model:value="registerModel.email" placeholder="请输入邮箱" />
                    </NFormItem>
                    <NFormItem>
                        <NButton class="register-button" type="primary" attr-type="submit" @click="handleregister"
                            size="large" :loading="registerLoading" block>
                            注册
                        </NButton>
                    </NFormItem>
                </NForm>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { userApi } from '@/api'
import { isEmail } from "@/utils/validate";
import { useRouter } from 'vue-router';

const message = window["$message"];
const router = useRouter();
const againPasswordRef = ref();
const registerLoading = ref(false);
const registerRef = ref();
const registerModel = ref({ userCode: '', password: '', againPassword: '', email: '' });

const registerRules = {
    userCode: {
        required: true,
        message: "请输入账号",
        trigger: ["input", "blur"],
    },
    password: {
        required: true,
        message: "请输入密码",
        trigger: ["input", "blur"],
    },
    againPassword: [
        {
            required: true,
            message: "请再次输入密码",
            trigger: ["input", "blur"],
        },
        {
            validator: (_rule, value) => {
                return (
                    !!registerModel.value.password &&
                    registerModel.value.password.startsWith(value) &&
                    registerModel.value.password.length >= value.length
                );
            },
            message: "两次密码输入不一致",
            trigger: "input",
        },
        {
            validator: (_rule, value) => value === registerModel.value.password,
            message: "两次密码输入不一致",
            trigger: ["blur", "password-input"],
        },
    ],
    email: [
        {
            required: true,
            message: "请输入邮箱",
            trigger: ["input", "blur"],
        },
        {
            validator: (_rule, value) => isEmail(value),
            trigger: ["input", "blur"],
            message: "请输入正确的邮箱格式",
        },
    ],
};

const handlePasswordInput = () => {
    if (registerModel.value.againPassword) {
        againPasswordRef.value?.validate({ trigger: "password-input" });
    }
};

const handleregister = () => {
    registerRef.value
        ?.validate((errors: any) => {
            if (errors) {
                return;
            }
            registerLoading.value = true;
            userApi.register(registerModel.value).then((res: any) => {
                if (res.code === 200) {
                    message && message.success("注册成功, 请登录");
                    router.push({ name: 'login', query: { showSwitch: 'login' } })
                }
            }).finally(() => {
                registerLoading.value = false;
            });
        });
}
</script>

<style scoped lang="less">
.container-header {
    height: 100px;
    line-height: 100px;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
}

.container-body {
    display: flex;
    justify-content: center;

    .container-register {
        width: 400px;

        .register-button {
            width: 100px;
            margin: 0 auto;
        }
    }
}
</style>